<template>
  <div class="demo_form">
    <div class="form_header">
      <span class="form_font">考研资料分享系统</span>
    </div>
    <div class="form_body">
      <el-form label-width="50px" class="demo-ruleForm">
        <el-input placeholder="手机号/工号" v-model="form.telphone"></el-input>
        <el-input
          placeholder="密码"
          type="password"
          autocomplete="off"
          v-model="form.password"
        ></el-input>
        <el-radio v-model="radio" label="0">普通人员</el-radio>
        <el-radio v-model="radio" label="1">管理员</el-radio>
        <el-button type="primary" @click="update" @keyup.enter="update">登录</el-button>
        <span class="password">忘记密码?</span><span class="register" @click="jumpRegister">注册?</span>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login} from '../api/myReq'
export default {
  name: "ZhouxiaoweiLogin",
  data() {
    return {
      form: {
        telphone: "",
        password: "",
      },
      radio: "0",
    };
  },
  methods:{
    update(){
        login(this.form.telphone,this.form.password,this.radio).then((resp)=>{
           const user = resp.data.data[0];
           this.$store.commit("USERINFO",user);
           /* 用来改变路由里面的路由定向 */
           if(this.$store.state.user.utype){
            this.$router.push('/home/userInfo')
           }else{
            this.$router.push('/home');
           }
           
        })
    },
    jumpRegister(){
        this.$router.push('/register');
    }
  }
}
</script>

<style scoped>
.demo_form {
  width: 420px;
  height: 510px;
  margin: 100px auto;
}
.form_header {
  widows: 100%;
  height: 130px;
  background: url("../assets/bg.jpg");
  background-position: 50% 50%;
  border-radius: 10px 10px 0px 0px;
  text-align: center;
  line-height: 120px;
}
.form_font {
  font-size: 20px;
  font-family: 300;
}
.form_body {
  position: relative;
  width: 100%;
  height: 280px;
  padding: 20px 0;
  border-radius: 0px 0px 10px 10px;
  background-color: white;
}
.el-input{
    margin: 10px 22px;
    width: 88%;
}
.el-radio{
    margin: 10px 22px;
}
.el-button{
    display: block;
    margin: 20px auto;
}
span{
margin: 0px 20px;
}
.register{
  position: absolute;
  right: 0;
  margin-top: 20px;
}
.password{
  position: absolute;
  left: 0;
  margin-top: 20px;
}
</style>